<template>
  <div class="system-config">
    <el-tabs v-model="activeTab" type="border-card">
      <el-tab-pane label="基本设置" name="basic">
        <div class="config-section">
          <h4>系统信息</h4>
          <el-form :model="basicConfig" label-width="120px">
            <el-form-item label="系统名称">
              <el-input v-model="basicConfig.systemName" placeholder="请输入系统名称" />
            </el-form-item>
            <el-form-item label="系统版本">
              <el-input v-model="basicConfig.version" placeholder="请输入系统版本" />
            </el-form-item>
            <el-form-item label="管理员邮箱">
              <el-input v-model="basicConfig.adminEmail" placeholder="请输入管理员邮箱" />
            </el-form-item>
            <el-form-item label="系统描述">
              <el-input v-model="basicConfig.description" type="textarea" rows="3" placeholder="请输入系统描述" />
            </el-form-item>
          </el-form>
        </div>
      </el-tab-pane>
      
      <el-tab-pane label="检测参数" name="detection">
        <div class="config-section">
          <h4>品质检测标准</h4>
          <el-form :model="detectionConfig" label-width="120px">
            <el-form-item label="蛋白质标准(%)">
              <el-input-number v-model="detectionConfig.proteinStandard" :min="0" :max="20" :precision="1" />
            </el-form-item>
            <el-form-item label="水分标准(%)">
              <el-input-number v-model="detectionConfig.moistureStandard" :min="0" :max="20" :precision="1" />
            </el-form-item>
            <el-form-item label="灰分标准(%)">
              <el-input-number v-model="detectionConfig.ashStandard" :min="0" :max="5" :precision="1" />
            </el-form-item>
            <el-form-item label="面筋标准(%)">
              <el-input-number v-model="detectionConfig.glutenStandard" :min="0" :max="50" :precision="1" />
            </el-form-item>
          </el-form>
        </div>
        
        <div class="config-section">
          <h4>品质等级标准</h4>
          <el-table :data="qualityStandards" style="width: 100%">
            <el-table-column prop="level" label="等级" width="100" />
            <el-table-column prop="proteinMin" label="蛋白质最小值(%)" width="150" />
            <el-table-column prop="proteinMax" label="蛋白质最大值(%)" width="150" />
            <el-table-column prop="moistureMax" label="水分最大值(%)" width="150" />
            <el-table-column prop="ashMax" label="灰分最大值(%)" width="150" />
            <el-table-column prop="glutenMin" label="面筋最小值(%)" width="150" />
            <el-table-column label="操作" width="100">
              <template #default="{ row }">
                <el-button type="text" size="small" @click="editQualityStandard(row)">
                  <el-icon><Edit /></el-icon>
                  编辑
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
      
      <el-tab-pane label="安全设置" name="security">
        <div class="config-section">
          <h4>密码策略</h4>
          <el-form :model="securityConfig" label-width="120px">
            <el-form-item label="最小密码长度">
              <el-input-number v-model="securityConfig.minPasswordLength" :min="6" :max="20" />
            </el-form-item>
            <el-form-item label="密码复杂度">
              <el-checkbox-group v-model="securityConfig.passwordComplexity">
                <el-checkbox label="uppercase">必须包含大写字母</el-checkbox>
                <el-checkbox label="lowercase">必须包含小写字母</el-checkbox>
                <el-checkbox label="number">必须包含数字</el-checkbox>
                <el-checkbox label="special">必须包含特殊字符</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="密码有效期(天)">
              <el-input-number v-model="securityConfig.passwordExpiry" :min="0" :max="365" />
            </el-form-item>
            <el-form-item label="登录失败锁定">
              <el-input-number v-model="securityConfig.loginFailLock" :min="3" :max="10" />
            </el-form-item>
          </el-form>
        </div>
        
        <div class="config-section">
          <h4>会话管理</h4>
          <el-form :model="securityConfig" label-width="120px">
            <el-form-item label="会话超时时间(分钟)">
              <el-input-number v-model="securityConfig.sessionTimeout" :min="10" :max="480" />
            </el-form-item>
            <el-form-item label="允许同时登录">
              <el-switch v-model="securityConfig.allowMultipleLogin" />
            </el-form-item>
          </el-form>
        </div>
      </el-tab-pane>
      
      <el-tab-pane label="通知设置" name="notification">
        <div class="config-section">
          <h4>邮件通知</h4>
          <el-form :model="notificationConfig" label-width="120px">
            <el-form-item label="SMTP服务器">
              <el-input v-model="notificationConfig.smtpServer" placeholder="请输入SMTP服务器地址" />
            </el-form-item>
            <el-form-item label="SMTP端口">
              <el-input-number v-model="notificationConfig.smtpPort" :min="1" :max="65535" />
            </el-form-item>
            <el-form-item label="发件人邮箱">
              <el-input v-model="notificationConfig.senderEmail" placeholder="请输入发件人邮箱" />
            </el-form-item>
            <el-form-item label="邮箱密码">
              <el-input v-model="notificationConfig.emailPassword" type="password" placeholder="请输入邮箱密码" show-password />
            </el-form-item>
            <el-form-item label="启用SSL">
              <el-switch v-model="notificationConfig.enableSSL" />
            </el-form-item>
          </el-form>
        </div>
        
        <div class="config-section">
          <h4>通知事件</h4>
          <el-form :model="notificationConfig" label-width="120px">
            <el-form-item label="新用户注册">
              <el-switch v-model="notificationConfig.newUserRegister" />
            </el-form-item>
            <el-form-item label="检测完成">
              <el-switch v-model="notificationConfig.detectionComplete" />
            </el-form-item>
            <el-form-item label="报告生成">
              <el-switch v-model="notificationConfig.reportGenerated" />
            </el-form-item>
            <el-form-item label="系统异常">
              <el-switch v-model="notificationConfig.systemError" />
            </el-form-item>
          </el-form>
        </div>
      </el-tab-pane>
    </el-tabs>
    
    <div class="config-actions">
      <el-button @click="resetConfig">重置</el-button>
      <el-button type="primary" @click="saveConfig">保存配置</el-button>
    </div>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

export default {
  name: 'SystemConfig',
  setup() {
    const activeTab = ref('basic')
    
    const basicConfig = reactive({
      systemName: '小麦品质检测系统',
      version: 'v1.0.0',
      adminEmail: 'admin@wheat-quality.com',
      description: '专业的小麦品质检测管理系统，提供全面的品质检测、数据分析和报告生成功能。'
    })
    
    const detectionConfig = reactive({
      proteinStandard: 12.0,
      moistureStandard: 13.5,
      ashStandard: 2.0,
      glutenStandard: 28.0
    })
    
    const qualityStandards = ref([
      {
        level: '优质',
        proteinMin: 12.0,
        proteinMax: 15.0,
        moistureMax: 13.5,
        ashMax: 2.0,
        glutenMin: 28.0
      },
      {
        level: '良好',
        proteinMin: 11.0,
        proteinMax: 12.0,
        moistureMax: 14.0,
        ashMax: 2.2,
        glutenMin: 26.0
      },
      {
        level: '一般',
        proteinMin: 10.0,
        proteinMax: 11.0,
        moistureMax: 15.0,
        ashMax: 2.5,
        glutenMin: 24.0
      },
      {
        level: '较差',
        proteinMin: 0,
        proteinMax: 10.0,
        moistureMax: 20.0,
        ashMax: 5.0,
        glutenMin: 0
      }
    ])
    
    const securityConfig = reactive({
      minPasswordLength: 8,
      passwordComplexity: ['uppercase', 'lowercase', 'number'],
      passwordExpiry: 90,
      loginFailLock: 5,
      sessionTimeout: 30,
      allowMultipleLogin: true
    })
    
    const notificationConfig = reactive({
      smtpServer: 'smtp.example.com',
      smtpPort: 587,
      senderEmail: 'noreply@wheat-quality.com',
      emailPassword: '',
      enableSSL: true,
      newUserRegister: true,
      detectionComplete: true,
      reportGenerated: true,
      systemError: true
    })
    
    const editQualityStandard = (row) => {
      ElMessage.info('编辑品质标准功能开发中...')
    }
    
    const resetConfig = () => {
      ElMessageBox.confirm(
        '确定要重置所有配置吗？',
        '确认重置',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).then(() => {
        ElMessage.success('配置已重置')
      }).catch(() => {})
    }
    
    const saveConfig = () => {
      ElMessage.success('配置保存成功')
    }
    
    return {
      activeTab,
      basicConfig,
      detectionConfig,
      qualityStandards,
      securityConfig,
      notificationConfig,
      editQualityStandard,
      resetConfig,
      saveConfig
    }
  }
}
</script>

<style scoped>
.system-config {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.config-section {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.config-section h4 {
  margin: 0 0 16px 0;
  font-size: 16px;
  color: #333;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 8px;
}

.config-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  background: #fff;
  padding: 16px 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
</style>
